<template>
	<view class="newPartyWp">
		<view class="bgImg">
			<u-image src="https://file.casugn.com/storecompcard/temp/组局bg@2x_1682302473174.png" width="750rpx"
				height="500rpx"></u-image>
		</view>
		<u-status-bar></u-status-bar>
		<!-- 自定义导航 -->
		<u-navbar @leftClick="goBackHome" title="组局" :bgColor="navbarBgColor" :titleStyle="{color:'#ffffff'}">
			<view class="u-nav-slot" slot="left">
				<view>
					<u-icon name="arrow-left" size="40" color="#ffffff"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="headWP">
			<u--form :errorType="message" :labelStyle="{fontSize:'26rpx',color:'#1D2129'}" labelWidth="auto"
				labelPosition="top" :model="newPartyInfo" ref="uForm">
				<u-form-item
					leftIcon="https://file.casugn.com/storecompcard/temp/general／trophy@2x_1682317514547.png"
					label="主题" borderBottom ref="item1">
					<u--input v-model="newPartyInfo.title" border="none" maxlength='20' fontSize="30rpx"
						placeholderStyle="font-size:30rpx;color:#999"></u--input>
				</u-form-item>
				<u-form-item @click="showPicker = true"
					leftIcon="https://file.casugn.com/storecompcard/temp/general／user-group@2x_1682317532828.png"
					label="人数" borderBottom ref="item1">
					<view class="inputWp cusInputWpForNum">
						<view class="remark" style="color: #999;font-size: 30rpx;">
							{{partyNumber }}/{{maxCount}}
						</view>
					</view>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<!-- 桌子布局显示 -->
				<view class="tableWp">
					<tableStyle2 :maxCount='maxCount' @clickPartyItem="clickPartyItem" :membersList="membersList">
					</tableStyle2>
				</view>
				<u-form-item
					leftIcon="https://file.casugn.com/storecompcard/temp/general／schedule@2x_1682317552818.png"
					label="时间" prop="newPartyInfo.partyTime" borderBottom ref="item1">
					<uni-datetime-picker :start="startTime" v-model="newPartyInfo.partyTime" @close="checkTime">
						<u--input v-model="newPartyInfo.partyTime" border="none" readonly fontSize="30rpx"
							placeholder="请选择时间" placeholderStyle="font-size:30rpx;color:#999"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</uni-datetime-picker>
				</u-form-item>
				<u-form-item @click="chooseLocation"
					leftIcon="https://file.casugn.com/storecompcard/temp/general／location@2x_1682317704251.png"
					label="地点" borderBottom ref="item1">
					<u--input v-model="addressToShow" border="none" readonly fontSize="30rpx" placeholder="选择地点"
						placeholderStyle="font-size:30rpx;color:#999"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item leftIcon="https://file.casugn.com/storecompcard/temp/general／pen@2x_1682317753693.png"
					label="备注" prop="newPartyInfo.remark" borderBottom ref="item1">
					<u--input v-model="newPartyInfo.remark" border="none" fontSize="30rpx" placeholder="请输入备注(30字内)"
						maxlength='30' placeholderStyle="font-size:30rpx;color:#999"></u--input>
				</u-form-item>
			</u--form>
			<view class="submitBtnWp">
				<view class="submitBtn">
					<u-button type="primary" text="暂存" @click="submitNewParty(0)" :plain="true"></u-button>
				</view>
				<view class="submitBtn">
					<u-button type="primary" text="发布" @click="submitNewParty(1)"></u-button>
				</view>
			</view>
		</view>
		<!-- 参与人员操作弹窗 -->
		<u-popup :show="showOptionPop" @close='closeOptionPop' mode="bottom" :closeOnClickOverlay='true'>
			<view class="showOptionPopWp">
				<view class="showOptionPopTitle">
					人员设置
				</view>
				<view class="showOptionPopItem flex_between_center">
					<view class="left flex_start_center flex_1">
						<view>
							<u--image radius="4" width="96rpx" height="96rpx"
								:src="partyPersonInfo.head?partyPersonInfo.head:defaultHead"></u--image>
						</view>
						<view>
							<view class="name">
								{{partyPersonInfo.name?partyPersonInfo.name:''}}
							</view>
							<view class="mobile">
								{{partyPersonInfo.mobile?partyPersonInfo.mobile:''}}
							</view>
						</view>
					</view>
					<view class="right flex_between_center">
						<view class="btnText" @click="showGuestList">
							更换
						</view>
						<view class="btnText2 " @click="delPerson">
							删除
						</view>
					</view>

				</view>
				<view class="flex_start_center">
					<view style="margin-right: 20rpx;">
						邀请时显示参与人员信息
					</view>
					<u-switch v-model="partyPersonInfo.isShow" :activeValue="1" activeColor="#5ac725" size="45"
						:inactiveValue="0" @change="changeSwitch"></u-switch>
				</view>
				<view class="info" v-if="partyPersonInfo.isShow==0">
					关闭后该宾客将不能看到其他宾客信息和参与组局聊天
				</view>
				<view class="info" v-else>
				</view>
				<view class="showOptionPopItem">
					<u-button type="primary" text="确定" @click="closeOptionPop"></u-button>
				</view>
			</view>
		</u-popup>
		<!-- 餐会人数选择 -->
		<u-picker :show="showPicker" :columns="columns" title="选择人数" @cancel="showPicker = false"
			@confirm="confirmPeopleNum" confirmColor="#015eea" :defaultIndex="defaultIndex"></u-picker>
		<!-- 宾客列表 -->
		<u-popup :show="showMoreListPopup" :round="10" @close='closeMoreListPopup' mode="bottom"
			:closeOnClickOverlay='true'>
			<!-- tabs 切换 -->
			<view class="dlgWp">
				<u-sticky bgColor="#fff">
					<u-tabs :list="tabsList" @change="changeTabs" :current="currentTabs"
						:activeStyle="{color:'#276AEE',fontWeight: 600}" lineColor="#276AEE" lineWidth="48rpx"
						lineHeight="4rpx" :inactiveStyle="{color:'#1D2129',fontWeight: 600}">
					</u-tabs>
				</u-sticky>
				<!-- 好友名片选人 -->
				<view v-if="currentTabs==0">
					<u-empty v-if="partyPersonList.length==0" mode="data" :width='320' :height="320" :textSize='30'
						:marginTop='50'>
					</u-empty>
					<view class="moreListWp">
						<view class="moreItem" v-for="(item,index) in partyPersonList" :key="index"
							@click.stop="selectGuest(item,index)">
							<view class="left">
								<img :src="item.head" v-if="item.head" alt="" class='leftImgWp'>
								<u-image v-else
									src="https://file.casugn.com/storecompcard/temp/avatar_1682582523631.png"
									width="80rpx" height="80rpx" alt=""></u-image>
							</view>
							<view class="right">
								<view>
									<text class="name"> {{item.name?item.name:''}}</text>
								</view>
								<view class="company">
									{{item.mobile?item.mobile:''}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 近期约饭选人 -->
				<view v-if="currentTabs==1">
					<u-empty v-if="lastDealPartyList.length==0" mode="data" :width='320' :height="320" :textSize='30'
						:marginTop='50'>
					</u-empty>
					<view class="moreListWp">
						<view class="moreItem" v-for="(item,index) in lastDealPartyList" :key="index"
							@click.stop="selectLastDeal(item)">
							<view class="left">
								<img :src="item.head?item.head:defaultHead" alt="" class='leftImgWp'>
							</view>
							<view class="right">
								<view>
									<text class="name"> {{item.name?item.name:''}}</text>
								</view>
								<view class="company">
									<text> 备注: {{item.remark?item.remark:''}}</text>
								</view>
							</view>
						</view>
					</view>

				</view>
				<!-- 手动添加人员 -->
				<view class="handleOptionWp" v-if="currentTabs==2">
					<u--form errorType="message" :labelStyle="{fontSize:'30rpx',color:'#1D2129',fontWeight:600}"
						labelWidth="auto" labelPosition="top" :model="handleAddMembersForm"
						ref="handleAddMembersFormRef">
						<u-form-item label="宾客姓名" prop="handleAddMembersForm.name" borderBottom>
							<u--input v-model="handleAddMembersForm.name" border="none" fontSize="26rpx"
								placeholder="请输入宾客姓名(6字内)" maxlength='6'
								placeholderStyle="font-size:30rpx;color:#999"></u--input>
						</u-form-item>
					</u--form>
					<view class="optionBtnWp">
						<view class="optionBtn">
							<u-button type="primary" text="取消" @click="closeMoreListPopup" :plain="true"></u-button>
						</view>
						<view class="optionBtn">
							<u-button type="primary" text="确定" @click="handleAddMembers"></u-button>
						</view>
					</view>
				</view>

			</view>
		</u-popup>
	</view>
</template>
<script>
	import baseConfig from '@/config/baseUrl.js'
	const chooseLocation = requirePlugin('chooseLocation');
	import {
		mapGetters
	} from 'vuex'
	import tableStyle from '@/pagesParty/components/tableStyle/tableStyle.vue'
	import tableStyle2 from '@/pagesParty/components/tableStyle/tableStyle2.vue'
	import {
		defaultHead
	} from '@/config/staticConfig.js'
	export default {
		components: {
			tableStyle,
			tableStyle2,
		},
		data() {
			return {
				defaultHead,
				showMoreListPopup: false,
				startTime: Date.now(),
				addressToShow: '',
				columns: [
					[4, 6, 8, 10, 12]
				],
				defaultIndex: [1],
				newPartyInfo: {
					partyTime: '',
					address: '',
					remark: '',
					title: '',
				},
				openId: '',
				showPicker: false,
				maxCount: 6,
				membersList: [],
				partyPersonList: [], //好友列表
				placeHolderUserObj: {
					name: '待定',
					head: defaultHead,
					isNotice: 1,
					isShow: 1,
				},
				lastDealPartyList: [], //近期约饭列表
				currentTabs: 0,
				tabsList: [{
						name: '名片好友'
					},
					{
						name: '近期约饭'
					},
					{
						name: '手动添加'
					},
				],
				showTimePicker: false,
				navbarBgColor: 'transparent',
				//手动添加人员
				handleAddMembersForm: {
					createType: 1,
					name: '',
					head: defaultHead,
					photo: defaultHead,
					ui_position: '',
					isNotice: 0,
					isShow: 1
				},
				partyPersonInfo: {
					isShow: 1
				},
				showOptionPop: null, //人员操作列表
				partyPersonInfoIndex: null

			};
		},
		computed: {
			...mapGetters(['userInfo']),
			partyNumber() {
				if (this.membersList.length > 0) {
					let arr = this.membersList.filter(item => item.friendOpenId)
					return arr.length
				} else {
					return '0'
				}
			},

		},

		onLoad(opt) {
			wx.hideShareMenu()
			this.defaultList()
			this.getGusetList()

		},
		onShow() {
			//地图插件选点
			const location = chooseLocation.getLocation();
			if (location) {
				this.addressToShow = location.name
				this.newPartyInfo.address = JSON.stringify(location)
			}
			this.getLastDealPartyList()
			uni.hideLoading()

		},
		onUnload() {
			chooseLocation.setLocation(null);
		},
		methods: {
			//初始化
			defaultList() {
				let arr = []
				for (let i = 0; i < this.maxCount; i++) {
					arr.push(this.placeHolderUserObj)
				}
				let positionAngle = 360 / this.maxCount
				let newArr = arr.map((item, index) => {
					let newItem = Object.assign({}, {
						...item
					}, {
						ui_position: this.getAxis(index * positionAngle),
					})
					return newItem
				})
				this.membersList = newArr
				//将主人添加入
				let initiator = Object.assign({
					...this.membersList[0]
				}, {
					...this.userInfo,

				}, {
					isShow: 0,
					friendOpenId: this.userInfo.openId
				})
				this.membersList.splice(0, 1, initiator)
			},
			initPerson() {
				//不变
				if (this.maxCount == this.membersList.length) return
				// 增加
				if (this.maxCount > this.membersList.length) {
					for (let i = this.membersList.length; i < this.maxCount; i++) {
						this.membersList.splice(i, 0, this.placeHolderUserObj)
					}
				}
				// 删除
				else if (this.maxCount < this.membersList.length) {
					// 循环一遍删除空位
					for (let i = this.membersList.length - 1; i > 0; i--) {
						if (this.membersList.length === this.maxCount) break
						if (this.membersList[i].friendOpenId) continue
						this.membersList.splice(i, 1)
					}
					// 如果人还多着,则从后向前删除
					for (let i = this.membersList.length - 1; i > 0; i--) {
						if (this.membersList.length === this.maxCount) {
							break
						}
						this.membersList.splice(i, 1)
					}
				}
				//重新计算角度
				let positionAngle = 360 / this.maxCount
				let arr = JSON.parse(JSON.stringify(this.membersList))
				arr.forEach((item, index) => {
					item.ui_position = this.getAxis(index * positionAngle)
				})
				this.membersList = arr
			},
			//删除选中的宾客
			delPerson() {
				let defaultItem = {
					...this.placeHolderUserObj,
					ui_position: this.partyPersonInfo.ui_position,
					isShow: 1
				}
				this.membersList.splice(this.partyPersonInfoIndex, 1, defaultItem)
				this.closeOptionPop()

			},
			getAxis(angle) {
				// 公式，r-半径，angle-角度
				// x: r+r*Math.sin(angle*Math.PI/180)
				// y: r-r*Math.cos(angle*Math.PI/180)
				return `translate(${300*Math.sin(angle*Math.PI/180)+300}rpx, ${300-300*Math.cos(angle*Math.PI/180)}rpx)`
			},
			async getGusetList() {
				let res = await this.$api.queryCardByCondition({
					openId: this.userInfo.openId
				})
				if (res.success) {
					this.partyPersonList = res.result || []
				} else {
					this.partyPersonList = []
				}
			},
			//显示客户列表
			showGuestList() {
				this.showOptionPop = false
				this.currentTabs = 0
				this.showMoreListPopup = true
			},
			selectGuest(item) {
				if (this.membersList.some(i => i.friendOpenId == item.friendOpenId)) {
					return uni.showToast({
						title: '已邀请同一宾客',
						icon: 'none'
					});
				}
				let guestInfo = Object.assign(item, {
					createType: 0, //从名片夹里选择状态为0 ,手动为1 
					ui_position: this.partyPersonInfo.ui_position,
					isShow: 1, //默认通知
				})
				this.membersList.splice(this.partyPersonInfoIndex, 1, guestInfo)
				this.showMoreListPopup = false
			},
			//从近期约饭列表里选人
			selectLastDeal(item) {
				console.log(item, '选择近期约饭好友');
				this.currentTabs = 0
				//如果是手动添加的 判断
				if (item.friendOpenId != null) {
					if (this.membersList.some(i => i.friendOpenId == item.friendOpenId)) {
						return uni.showToast({
							title: '已邀请过该位宾客',
							icon: 'none'
						});
					}
				}
				let guestInfo = Object.assign(item, {
					ui_position: this.partyPersonInfo.ui_position,
					isShow: 1,
				})
				this.membersList.splice(this.partyPersonInfoIndex, 1, guestInfo)
				this.showMoreListPopup = false
			},
			//更改人员数据
			setPartyPersonList({
				index,
				data
			}) {
				this.membersList.splice(index, 1, data)
			},
			//选择人数完成
			confirmPeopleNum(e) {
				console.log(e);
				this.maxCount = e.value[0]
				this.showPicker = false
				this.initPerson()
			},
			checkTime() {
				if (this.newPartyInfo.partyTime.indexOf(":") == -1) {
					return uni.showToast({
						title: '请选择具体时间',
						icon: 'none'
					});
				}
			},

			//提交发布组局 提交为1 暂存为0 
			async submitNewParty(status) {
				if (!this.newPartyInfo.title) {
					return uni.showToast({
						title: '请填写组局标题',
						icon: 'none'
					});
				}
				if (!this.newPartyInfo.partyTime) {
					return uni.showToast({
						title: '请选择组局时间',
						icon: 'none'
					});
				}
				if (this.newPartyInfo.partyTime.indexOf(":") == -1) {
					return uni.showToast({
						title: '请补充组局具体时间',
						icon: 'none'
					});
				}
				if (!this.newPartyInfo.address) {
					return uni.showToast({
						title: '请选择组局地点',
						icon: 'none'
					});
				}
				let membersList = this.membersList.map(item => {
					let newItem = {}
					newItem = Object.assign(item, {
						photo: item.head,
						userName: item.name,
						openId: item.friendOpenId,
						isDel: 0,

					})
					delete newItem.id //后台要求 ,防止cardId 干扰
					return newItem
				})
				membersList = membersList.filter(item => {
					return item.openId
				})

				if (membersList.length <= 1) {
					return uni.showToast({
						title: '请补充要邀请的人员',
						icon: 'none'
					});
				}
				let payload = {
					address: this.newPartyInfo.address,
					startTime: this.newPartyInfo.partyTime,
					remark: this.newPartyInfo.remark,
					title: this.newPartyInfo.title,
					status,
					initiatorId: this.userInfo.openId,
					initiator: this.userInfo.name,
					membersList,
				}
				uni.showLoading({
					title: '创建中'

				})
				let res = await this.$api.creatGroupInfo(payload)
				if (res.success) {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
					this.newPartyInfo = {}
					this.membersList = []
					uni.navigateBack()
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}
				uni.hideLoading()
			},
			//选择地点
			chooseLocation() {
				const key = baseConfig.mapData.mapKey; //使用在腾讯位置服务申请的key
				const referer = baseConfig.mapData.appName //调用插件的app的名称
				let location = ''
				if (this.newPartyInfo.address) {
					location = this.newPartyInfo.address || ""
				} else {
					location = ''
				}
				console.log(location, 'location');
				wx.navigateTo({
					url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&location=${location}`
				});
			},
			changeTabs(e) {
				this.currentTabs = e.index
			},
			//获取近期约饭列表人员
			async getLastDealPartyList() {
				let payload = {
					openId: this.userInfo.openId,
				}
				let res = await this.$api.getLastDealPartyList(payload)
				if (res.success) {
					console.log(res.result, '获取近期约饭list');
					this.lastDealPartyList = res.result.map(item => {
						if (!item.openId) {
							//前端模拟生成
							item.openId = this.randomString(20)
							item.createType = 1
						} else {
							item.createType = 0 //从名片夹里选择状态为0 ,手动为1
						}
						item.friendOpenId = item.openId
						item.head = item.photo ? item.photo : defaultHead //完善头像
						item.name = item.userName
						return item
					})
				} else {
					this.lastDealPartyList = []
				}
				uni.hideLoading()
			},
			//关闭人员选择弹窗
			closeMoreListPopup() {
				this.currentTabs = 0
				this.partyPersonInfoIndex = null
				this.showMoreListPopup = false
				this.partyPersonInfo = {
					isShow: 1
				}
				this.handleAddMembersForm = {
					createType: 1,
					name: '',
					head: defaultHead,
					photo: defaultHead,
					ui_position: '',
					isShow: 1
				}
			},
			goBackHome() {
				const pageNum = getCurrentPages()
				if (pageNum.length > 1) {
					uni.navigateBack()
				} else {
					uni.switchTab({
						url: '/pages/card/card'
					})
				}
			},
			randomString(e) {
				e = e || 32;
				var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
					a = t.length,
					n = "";
				for (var i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
				return n
			},
			//点击桌子上的人
			clickPartyItem({
				item,
				index
			}) {
				if (index == 0) return //选中的是发起者
				console.log(item, '点击桌子上的人');
				this.partyPersonInfo = item
				this.partyPersonInfoIndex = index
				if (this.partyPersonInfo.friendOpenId) { //已经选中人员
					this.showOptionPop = true
				} else {
					this.currentTabs = 0
					this.showMoreListPopup = true
				}
			},

			//手动添加
			handleAddMembers() {
				//前端模拟产生id
				let id = this.randomString(20)
				let guestInfo = Object.assign(this.handleAddMembersForm, {
					ui_position: this.partyPersonInfo.ui_position,
					friendOpenId: id,
					id, //编辑时不传id
					isNotice: 0, //不通知手动添加的人员
					isShow: 1,
				})
				this.setPartyPersonList({
					index: this.partyPersonInfoIndex,
					data: guestInfo
				})
				this.closeMoreListPopup()
			},
			//关闭人员操作弹窗
			closeOptionPop() {
				this.showOptionPop = false
				this.partyPersonInfo = {
					isShow: 1
				}
				this.partyPersonInfoIndex = null
			},
			changeSwitch(value) {
				let item = Object.assign(this.partyPersonInfo, {
					isShow: value
				})
				this.membersList.splice(this.partyPersonInfoIndex, 1, item)
				console.log(this.membersList[this.partyPersonInfoIndex]);
			}
		},
	}
</script>

<style lang="scss" scoped>
	.newPartyWp {
		min-height: 100vh;
		position: relative;
		padding-top: 1rpx;

		.bgImg {
			width: 750rpx;
			height: 500rpx;
			position: absolute;
			top: -45rpx;
			left: 0;
			z-index: -1;
			clear: both;
		}

		.headWP {
			background-color: #fff;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			margin-top: 200rpx;
			padding-top: 60rpx;
			padding-left: 32rpx;
			padding-right: 32rpx;

			.submitBtnWp {
				display: flex;
				justify-content: space-between;
				margin: 30upx;

				.submitBtn {
					margin: 30upx;
					flex: 1;
				}
			}

			.inputWp {
				flex: 1;
				margin-right: 10rpx;
			}

			.cusInputWpForNum {
				margin-right: 10rpx;
				width: 60rpx !important;
			}
		}



		.tableWp {
			width: 100%;
			display: flex;
			justify-content: center;
			position: relative;

			.cusInputMainWp {
				position: absolute;
				right: 1rpx;

				.title {
					margin-top: 0rpx;
					height: 90upx;
					display: flex;
					align-items: center;
					background: #FFFFFF;
					box-shadow: 0px 1px 4px 0px rgba(66, 60, 254, 0.4);
					border-radius: 20upx;

					.labelWp {
						margin: 0 20upx;
						display: flex;
						align-items: center;

						.imgWp {
							margin-right: 20upx;
							width: 40upx;
							height: 40upx;

							img {
								width: 100%;
								height: 100%;
							}
						}

						.titleWp {
							line-height: 40upx;
							font-size: 26upx;
							font-weight: 600;
							color: #333333;
						}


					}

					.inputWp {
						flex: 1;
						margin-right: 10rpx;
					}

					.cusInputWpForNum {
						margin-right: 10rpx;
						width: 60rpx !important;
					}



				}

			}

		}



		.chooseTime {
			height: 100%;
			position: relative;

			// line-height: 80upx !important ;
			.chooseTimeRemark {
				padding-top: 0;
			}
		}



		.title {
			margin: 30upx;
			height: 90upx;
			display: flex;
			align-items: center;
			background: #FFFFFF;
			box-shadow: 0px 1px 4px 0px rgba(66, 60, 254, 0.4);
			border-radius: 20upx;

			&:nth-child(3) {
				margin-bottom: 0;
			}

			.labelWp {
				display: flex;
				align-items: center;

				.imgWp {
					margin-right: 16upx;
					width: 32upx;
					height: 32upx;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.titleWp {
					line-height: 40upx;
					font-size: 26upx;
					font-weight: 600;
					color: #333333;
				}


			}

			.inputWp {
				flex: 1;
				margin-right: 10rpx;
				width: 450rpx;
			}




		}





	}


	//弹窗样式
	.dlgWp {
		box-sizing: border-box;
		margin: 30rpx;
		padding-bottom: 40rpx;
		height: 30vh;
		overflow: auto;



		.handleWp {
			.formWp {
				margin-top: 30rpx;
				display: flex;
				justify-content: center;

				padding-top: 30upx;

				.timeWp {
					display: flex;
					align-items: center;
				}


			}

			.submitBtnWp {
				margin: 0 30rpx;
				padding: 30rpx 0;
				overflow: hidden;
				margin-bottom: 40rpx;
			}
		}


		.title {
			text-align: center;
			color: #333333;

		}



		.moreListWp {
			height: 100%;
			padding-top: 30upx;

			.moreItem {
				display: flex;
				margin: 30upx 0;
				padding-bottom: 15upx;
				border-bottom: 1upx solid #eee;

				.left {
					padding-right: 30upx;

					.leftImgWp {
						width: 80upx;
						height: 80upx;
					}
				}

				.right {
					.name {
						width: 91upx;
						height: 29px;
						font-size: 30upx;
						font-weight: 500;
						color: #000000;
						line-height: 36upx;
					}

					.title {
						padding-left: 22upx;
						font-size: 18upx;
						font-weight: 400;
						color: #666666;
						line-height: 36upx;
					}

					.company {
						padding-top: 12upx;
						font-size: 24upx;
						font-weight: 400;
						color: #333333;
						line-height: 36upx;
					}
				}
			}
		}

		.handleOptionWp {
			height: 100%;
			display: flex;
			justify-content: space-between;
			flex-direction: column;


			.optionBtnWp {
				margin-bottom: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				overflow: hidden;

				.optionBtn {
					width: 250rpx;
				}

			}
		}


	}

	.showOptionPopWp {
		overflow: auto;
		box-sizing: border-box;
		margin: 0 30rpx;

		.showOptionPopTitle {
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 32rpx;
			font-weight: 600;
		}

		.showOptionPopItem {
			height: 150rpx;

			.left {

				.name {
					margin-left: 16rpx;
					overflow: hidden;
					height: 44rpx;
					font-size: 32rpx;
					font-weight: 600;
					color: #1D2129;
					line-height: 44rpx;
				}

				.mobile {
					margin-left: 16rpx;
					margin-top: 16rpx;
					overflow: hidden;
					height: 44rpx;
					font-size: 28rpx;
					color: #86909C;
					line-height: 44rpx;
				}
			}

			.right {
				.btnText {
					text-align: center;
					width: 120rpx;
					height: 56rpx;
					background: #E9F0FD;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #276AEE;
					line-height: 56rpx;
				}

				.btnText2 {
					text-align: center;
					margin-left: 20rpx;
					width: 120rpx;
					height: 56rpx;
					background: #FFECE8;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #F53F3F;
					line-height: 56rpx;
				}
			}



		}

		.info {
			height: 60rpx;
			font-size: 24rpx;
			line-height: 60rpx;
			color: #86909C;
		}
	}
</style>